<template>
	<view>

		<!-- 占位 -->
		<view v-if="showHeader" class="place"></view>
		<!-- 用户信息 -->
		<view class="user">
			<!-- 头像 -->
			<view class="left">
				<image :src="user.avatarUrl"></image>
			</view>
			<!-- 昵称,个性签名 -->
			<view class="right">
				<button class="username" @tap="toLogin" style="border: none;" open-type="getUserInfo">{{user.nickName}}</button>
			</view>

		</view>


		<!-- 工具栏 -->
		<view class="toolbar">
			<view class="list">
				<view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row.url)">
					<button class="img" :open-type="row.text=='在线客服'?'contact':''">
						<image :src="row.img"></image>
					</button>
					<view class="text">{{row.text}}</view>
				</view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="modalShow==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green">确定</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl">
					<view class="grid col-2 padding-sm">
						<view class="padding-sm" @tap="toCreate" data-type="new">
							<view class="bg-gradual-red padding radius text-center shadow-blur">
								<view class="text-lg">新房发布</view>
							</view>
						</view>
						<view class="padding-sm" @tap="toCreate" data-type="dazong">
							<view class="bg-gradual-orange padding radius text-center shadow-blur">
								<view class="text-lg">大宗物业发布</view>
							</view>
						</view>
						<view class="padding-sm" @tap="toCreate" data-type="sale">
							<view class="bg-gradual-green padding radius text-center shadow-blur">
								<view class="text-lg">租售发布</view>
							</view>
						</view>
						<!-- 	<view class="padding-sm" @tap="toCreate" data-type="zy">
							<view class="bg-gradual-blue padding radius text-center shadow-blur">
								<view class="text-lg">追拥发布</view>
							</view>
						</view>
						<view class="padding-sm" @tap="toCreate" data-type="sd">
							<view class="bg-gradual-purple padding radius text-center shadow-blur">
								<view class="text-lg">私单人员发布</view>
							</view>
						</view> -->
					</view>

				</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				isfirst: true,
				headerPosition: "fixed",
				headerTop: null,
				statusTop: null,
				showHeader: true,
				modalShow: false,
				//个人信息,
				user: {
					nickName: '点击登录',
					avatarUrl: '/static/img/face-white.png',
					openid: '',
					mobile: '',
					id: ''
				},

				// 工具栏列表
				mytoolbarList: [
					// {
					// 	url: '/pages/user/notice?name=公司介绍',
					// 	text: '公司介绍',
					// 	img: '/static/img/user/1.png'
					// },
					// {
					// 	url: '/pages/user/notice?name=商务合作',
					// 	text: '商务合作',
					// 	img: '/static/img/user/2.png'
					// },
					{
						url: '/pages/user/notice?name=使用指南',
						text: '新用引导',
						img: '/static/img/user/6.png'
					},
					{
						url: '/pages/user/myLike',
						text: '关注楼盘',
						img: '/static/img/user/9.png'
					},
					{
						url: '',
						text: '在线客服',
						img: '/static/img/user/10.png'
					},
					{
						url: '/pages/user/downloadList',
						text: '模板下载',
						img: '/static/img/user/4.png'
					},

					// {
					// 	url: '/pages/user/notice?name=微信交流群',
					// 	text: '微信交流群',
					// 	img: '/static/img/user/5.png'
					// },

					{
						url: '/pages/ruzhu/apply',
						text: '申请入驻',
						img: '/static/img/user/7.png'
					},
					{
						url: '/pages/ruzhu/list',
						text: '入驻列表',
						img: '/static/img/user/8.png'
					},

					{
						url: '/pages/user/customerRecordList',
						text: '客户报备',
						img: '/static/img/user/3.png'
					},
					{
						url: '/pages/user/create',
						text: '发布房源',
						img: '/static/img/user/11.png'
					},
				]
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';

		},
		onLoad() {

		},
		onReady() {
			//此处，演示,每次页面初次渲染都把登录状态重置
			// uni.setStorage({
			// 	key: 'UserInfo',
			// 	data: false,
			// 	success: function () {
			// 	},
			// 	fail:function(e){
			// 	}
			// });
		},
		onShow() {
			uni.getStorage({
				key: 'UserInfo',
				success: (res) => {
					if (!res.data) {
						return;
					}
					this.user = res.data;
				},
				fail: (e) => {
					//this.toLogin(); 
				}
			});
		},
		methods: {

			toLogin() {
				var me = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {

								me.user.nickName = infoRes.userInfo.nickName;
								me.user.avatarUrl = infoRes.userInfo.avatarUrl;
								uni.request({
									url: me.$rootUrl + '/Authorize/Verify',
									data: {
										wechaname: infoRes.userInfo.nickName,
										avatarUrl: infoRes.userInfo.avatarUrl,
										Code: loginRes.code
									},
									method: 'POST',
									success(res) {

										if (res.data.success) {
											me.user.openid = res.data.data.openid;
											me.user.id = res.data.data.memberid;
											me.user.mobile = res.data.data.mobile;
											console.log(me.user);
											uni.setStorage({
												key: 'UserInfo',
												data: me.user,
											})
										} else {
											uni.showModal({
												content: '服务器错误!',
												showCancel: false
											});
										}
									},
									fail() {
										me.isLoading = false;
										me.loadMoreText = me.connectionFailText;
										uni.showModal({
											content: me.connectionFailText,
											showCancel: false
										});
									}
								});

							}
						});
					}
				});
			},
			isLogin() {
				//实际应用中,用户登录状态应该用token等方法去维持登录状态.
				const value = uni.getStorageSync('UserInfo');
				if (value) {
					return true;
				}
				return false
			},
			toDeposit() {
				uni.navigateTo({
					url: '../../user/deposit/deposit'
				})
			},
			toPage(url) {
				var me = this;
				if ((me.user.mobile == ''||me.user.mobile==null) && (url == '/pages/user/create' || url == '/pages/user/customerRecordList' || url ==
						'/pages/ruzhu/apply' || url == '/pages/ruzhu/list')) {
					uni.showModal({
						title: '提示',
						content: '此模块需要绑定手机号！',
						confirmText: '绑定手机',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/login'
								})
							} else if (res.cancel) {
								return;
							}
						}
					});
				} else {

					if (!url) {
						return;
					} else {
						if (url == '/pages/user/create') {
							this.showModal();
						} else {
							uni.navigateTo({
								url: url
							})
						}
					}
				}


			},

			showModal() {
				this.modalShow = true;
			},
			hideModal() {
				this.modalShow = false;
			},
			toCreate(e) {
				var type = e.currentTarget.dataset.type;
				this.hideModal();
				if (type == 'zy') {
					uni.navigateTo({
						url: '/pages/zhuiyong/create'
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/create?type=' + type
					})
				}

			}
		}
	}
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #fff;
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #D1372C;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */

	}

	.header {

		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #D1372C;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.icon-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;

			.icon {
				color: #fff;
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
			}
		}
	}

	.place {
		background-color: #D1372C;
		height: 50upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.place-bottom {
		height: 300upx;
	}

	.user {

		align-items: center;
		// position: relative;
		background-color: #D1372C;
		padding-bottom: 100upx;

		.left {
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			border: solid 1upx #fff;
			border-radius: 100%;
			margin: 0 auto;

			image {
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}

		}

		.right {
			width: 100%;
			margin: 0 auto;

			.username {
				font-size: 36upx;
				background-color: #D1372C;
				color: #fff;
				text-align: center;
			}

			.username::after {
				border: none;
			}

			.signature {
				color: #eee;
				font-size: 28upx;
			}
		}

		.erweima {
			flex-shrink: 0;
			width: 10vw;
			height: 10vw;
			margin-left: 5vw;
			border-radius: 100%;

			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to left, #fbbb37 0%, #fcf0d0 105%);

			.icon {
				color: #7b6335;
				font-size: 42upx;
			}
		}
	}

	.toolbar {
		width: 92%;
		margin: 0 4% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;

		// box-shadow: 0upx 0upx 25upx rgba(0,0,0,0.1);
		// border-radius: 15upx;
		.title {
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			// width: 92%;
			// margin: 0 4%;

			.box {
				width: 25%;
				margin-top: 50rpx;
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.img {
					display: flex;
					-webkit-box-pack: center;
					-webkit-justify-content: center;
					-ms-flex-pack: center;
					justify-content: center;
					background-color: #D1372C;
					border-radius: 50%;
					padding: 10px;


					image {
						width: 9vw;
						height: 9vw;
					}
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
				}
			}
		}
	}
</style>
